<template>
    <Crumb />


    <div class="content">
        <GoodsListS @seachKey="seachKey" />
        <div class="search">
            <header>
                <div class="left">
                    <el-icon style="vertical-align: middle">
                        <Tickets />
                    </el-icon>
                    <span>数据列表</span>
                </div>
                <div>
                    <el-button type="primary" @click="add()">添加</el-button>
                </div>
            </header>
        </div>
        <el-table :data="TableList" :style="{ width: '100%', marginTop: '20px' }" border
            :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }">

            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" width="55" />
            <el-table-column label="商品图片" width="115">
                <template #default="{ row }">
                    <img :src="row.pic" alt="" :style="{ width: '80px' }">
                </template>
            </el-table-column>
            <el-table-column label="商品名称">
                <template #default="{ row }">
                    <p>{{ row.name }}</p>
                    <p v-if="row.brandName !== ''">品牌：{{ row.brandName }}</p>
                </template>
            </el-table-column>
            <el-table-column label="价格/货号" width="115">
                <template #default="{ row }">
                    <p>价格：￥{{ row.price }}</p>
                    <p>货号：{{ row.productSn }}</p>
                </template>
            </el-table-column>
            <el-table-column label="标签" width="115">
                <template #default="{ row }">
                    <p>
                        上架：
                        <el-switch v-model="row.publishStatus" :active-value="1" :inactive-value="0"
                            @change="changePublishStatus(row.id, row.publishStatus)" />
                    </p>
                    <p>
                        新品：
                        <el-switch v-model="row.newStatus" :active-value="1" :inactive-value="0"
                            @change="changeNewStatus(row.id, row.statnewStatusus)" />
                    </p>
                    <p>
                        推荐：
                        <el-switch v-model="row.recommendStatus" :active-value="1" :inactive-value="0"
                            @change="changerRcommendStatus(row.id, row.recommendStatus)" />
                    </p>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="email" label="SKU库存">
                <template #default>
                    <el-button type="primary" :icon="EditPen" circle />
                </template>
            </el-table-column>
            <el-table-column prop="sale" label="销量" />
            <el-table-column label="审核状态" width="100">
                <template #default="{ row }">
                    <el-button type="default" text size="small">{{ row.verifyStatus == 1 ? '审核通过' : '未审核' }}</el-button>
                    <br>
                    <el-button type="primary" text size="small">审核详情</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="email" label="操作">
                <template #default>
                    <el-button size="small">编辑</el-button><br>
                    <el-button type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <div class="bottom">
            <div class="left">
                <el-cascader :options="moreHttps" placeholder="批量操作" />
                <el-button type="primary">确定</el-button>
            </div>
            <el-pagination v-model:currentPage="pageination.currentPage" v-model:page-size="pageination.pageSize"
                :page-sizes="[5, 10, 15]" :small="pageination.small" :disabled="pageination.disabled"
                :background="pageination.background" layout="total, sizes, prev, pager, next, jumper"
                :total="pageination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>

    </div>
</template>
    
<script setup lang='ts'>
import GoodsListS from './components/goodsListS.vue'
import Crumb from '@/components/Crumb/index.vue';
import * as http from '@/request/api'
import { EditPen } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { useTable } from '@/hooks/components/useTable'
import { useRouter } from 'vue-router';
const router = useRouter()
const moreHttps = [
    {
        label: '商品上架',
        value: ''
    },
    {
        label: '商品下架',
        value: ''
    },
    {
        label: '设为推荐',
        value: ''
    },
    {
        label: '取消推荐',
        value: ''
    },
    {
        label: '设为新品',
        value: ''
    },
    {
        label: '取消新品',
        value: ''
    },
    {
        label: '转移到分类',
        value: ''
    },
    {
        label: '移入回收站',
        value: ''
    },
]
let { get,
    seachKey,
    pageination,
    TableList,
    handleSizeChange,
    handleCurrentChange,
} = useTable(http.commodity.productListAll, {} as CProductListAllParams)
const changePublishStatus = (id: number, publishStatus: number) => { }
const changeNewStatus = (id: number, statnewStatusus: number) => { }
const changerRcommendStatus = (id: number, recommendStatus: number) => { }
const add = () => {
    router.push('/pms/addProduct')
}
</script>
    
<style scoped lang="less">
.content {
    padding: 20px 15px;
    margin-top: 60px
}

.bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search {
    margin: 30px 0;
    padding: 20px;
    box-shadow: 0 0 20px #ccc;

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left span {
            padding-left: 15px;
        }
    }

    section {
        padding: 20px 0 10px;
    }
}
</style>